<template>
  <div class="flex flex-col">
    <div class="mb-20px flex justify-center">
      <el-text type="warning"
        >以下数据来源于 MallBook 聚合支付及分账系统，具体可登录 MallBook
        平台商户管理控台查看（https://cloud.mallbook.cn/）。
      </el-text>
    </div>
    <div class="balance-container">
      <div class="balance-card" v-for="(item, index) in balanceData" :key="index">
        <div class="card-icon" :style="{ background: item.bgColor }">
          <el-icon :class="item.iconClass">
            <component :is="item.iconComponent" />
          </el-icon>
        </div>
        <div class="card-content">
          <div class="card-title">{{ item.title }}</div>
          <div class="card-value">{{ item.value }} 元</div>
          <div v-if="item.buttonText" class="card-button">
            <el-button type="primary" @click="handleWithdraw">{{ item.buttonText }}</el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup name="SplittingBalance">
import { Wallet, Money, Loading, Document } from '@element-plus/icons-vue'
import * as SplittingApi from '@/api/pay/splitting/SplittingApi'

const message = useMessage() // 消息弹窗

const loading = ref(false)
const balance = ref<any>({
  transitAmount: 0,
  unsettleAmount: 0,
  settledAmount: 0,
  marketingAmount: 0
})

const balanceData = computed(() => [
  {
    title: '在途资金',
    value: (balance.value.transitAmount * 0.01).toFixed(2),
    iconComponent: Loading,
    iconClass: 'loading-icon',
    bgColor: 'rgba(255, 153, 0, 0.1)'
  },
  {
    title: '待清算资金',
    value: (balance.value.unsettleAmount * 0.01).toFixed(2),
    iconComponent: Document,
    iconClass: 'document-icon',
    bgColor: 'rgba(64, 158, 255, 0.1)'
  },
  {
    title: '可结算资金',
    value: (balance.value.settledAmount * 0.01).toFixed(2),
    iconComponent: Wallet,
    iconClass: 'wallet-icon',
    bgColor: 'rgba(74, 144, 226, 0.1)',
    buttonText: '结算到平台银行卡'
  },
  {
    title: '运营资金',
    value: (balance.value.marketingAmount * 0.01).toFixed(2),
    iconComponent: Money,
    iconClass: 'money-icon',
    bgColor: 'rgba(0, 166, 90, 0.1)'
  }
])

const loadData = () => {
  loading.value = true
  SplittingApi.getPlatformBalance()
    .then((res: any) => {
      loading.value = false
      balance.value = res
    })
    .catch(() => {
      loading.value = false
    })
}
const handleWithdraw = async () => {
  const amount = (balance.value.settledAmount * 0.01).toFixed(2)
  try {
    await message.confirm(
      '确定要提现【' +
        amount +
        '元】到平台商户号绑定的银行卡吗？以实际到账金额为准，提现手续费由第三方渠道代扣。'
    )
    SplittingApi.withdraw(balance.value.settledAmount).then(() => {
      message.success('提现成功')
      loadData()
    })
  } catch {}
}

onMounted(() => {
  loadData()
})
</script>

<style scoped>
.balance-container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: space-between;
}

.balance-card {
  min-width: 400px;
  min-height: 120px;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  margin: 0 10px;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  background-color: #fff;
}

.card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  color: #fff;
  font-size: 24px;
  margin-right: 20px;
}

.card-content {
  text-align: left;
}

.card-title {
  font-size: 14px;
  color: #999;
  margin-bottom: 5px;
}

.card-value {
  font-size: 24px;
  font-weight: bold;
  color: #333;
}

.wallet-icon {
  color: #4a90e2;
}

.money-icon {
  color: #00a65a;
}

.loading-icon {
  color: #ff9900;
}

.document-icon {
  color: #409eff;
}
</style>
